<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <style>
        .book-cover {
            width: 60px;
            height: 90px;
            object-fit: cover;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .book-cover:hover {
            transform: scale(1.8);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .book-title {
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .book-title:hover {
            color: #0056b3;
            text-decoration: underline;
        }
        .user-info {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 10px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        .user-info .username {
            font-weight: 600;
            color: #1976d2;
            margin-right: 10px;
        }
        .login-btn {
            color: #1976d2;
            text-decoration: none;
            font-weight: 500;
        }
        .login-btn:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="particles-js"></div>
    
    <div class="user-info">
        <th:block th:if="${session.user != null}">
            <span class="username" th:text="${session.user.username}">用户名</span>
            <a th:href="@{/logout}" class="btn btn-outline-danger btn-sm">退出登录</a>
        </th:block>
        <th:block th:unless="${session.user != null}">
            <a th:href="@{/login}" class="login-btn">登录</a>
        </th:block>
    </div>
    
    <div class="container mt-5">
        <h2 class="mb-4 text-center">图书管理系统</h2>
        
        <div class="row mb-4">
            <div class="col">
                <form th:action="@{/books}" method="get" class="d-flex">
                    <input type="text" name="search" class="form-control me-2" placeholder="搜索书名或作者...">
                    <button type="submit" class="btn btn-outline-primary">搜索</button>
                </form>
            </div>
            <div class="col-auto">
                <a th:href="@{/books/add}" class="btn btn-primary">添加新书</a>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>封面</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>价格</th>
                        <th>库存</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="book : ${books}">
                        <td>
                            <a th:href="@{/books/detail/{id}(id=${book.id})}">
                                <img th:if="${book.coverUrl}" th:src="${book.coverUrl}" class="book-cover" alt="封面">
                                <img th:unless="${book.coverUrl}" src="/img/default-cover.jpg" class="book-cover" alt="默认封面">
                            </a>
                        </td>
                        <td>
                            <a th:href="@{/books/detail/{id}(id=${book.id})}" class="book-title" th:text="${book.title}"></a>
                        </td>
                        <td th:text="${book.author}"></td>
                        <td th:text="${'¥' + #numbers.formatDecimal(book.price, 1, 2)}"></td>
                        <td th:text="${book.stock}"></td>
                        <td>
                            <div class="btn-group">
                                <a th:href="@{/books/edit/{id}(id=${book.id})}" class="btn btn-sm btn-warning me-2">编辑</a>
                                <form th:action="@{/books/delete/{id}(id=${book.id})}" method="post" style="display: inline;">
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除这本书吗？')">删除</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        particlesJS('particles-js', {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: '#ffffff' },
                shape: { type: 'circle' },
                opacity: { value: 0.5, random: false },
                size: { value: 3, random: true },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: '#ffffff',
                    opacity: 0.4,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 6,
                    direction: 'none',
                    random: false,
                    straight: false,
                    out_mode: 'out',
                    bounce: false
                }
            },
            interactivity: {
                detect_on: 'canvas',
                events: {
                    onhover: { enable: true, mode: 'repulse' },
                    onclick: { enable: true, mode: 'push' },
                    resize: true
                }
            },
            retina_detect: true
        });
    </script>
</body>
</html> 